import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { TabBar } from 'zarm';
import { useHistory } from 'react-router';
import s from './style.module.less'
import Icon from '../CustomIcon/index'
import CustomIcon from '../CustomIcon/index';
const NavBar = ({ showNav }) => {
    const [activeKey, setActiveKey] = useState('/')
    console.log(showNav);

    const history = useHistory()

    const changeTab = (path) => {
        console.log();
        setActiveKey(path)
        history.push(path)
    }


    return (
        <TabBar visible={showNav} className={s.tab} activeKey={activeKey} onChange={changeTab}>
            <TabBar.Item itemKey='/' title='账单' icon={<CustomIcon type="zhangdan"></CustomIcon>}></TabBar.Item>
            <TabBar.Item itemKey='/data'  title='统计' icon={<CustomIcon type="tongji"></CustomIcon>}></TabBar.Item>
            <TabBar.Item itemKey='/user'  title='我的' icon={<CustomIcon type="wode"></CustomIcon>}></TabBar.Item>
        </TabBar>
    )
}

NavBar.propTypes = {
    showNav: PropTypes.bool
}

export default NavBar